import {onMounted, reactive, Ref, ref} from "vue";
import {useUserStore} from "../store/user";

export default function (){
    const userstore = useUserStore()
    /**
     * 视口高度
     */
    let windowsHeight:Ref<number> = ref(0)
    /**
     * 视口宽度
     */
    let windowswidth:Ref<number> = ref(0)
    /**
     * 窗口颜色
     */
    let theme:Ref<string> = ref('default')
    let themeColor = reactive({"background-color":"","color":""})
    /**
     * 修改窗口背景色
     * @param isblack 是否为暗色
     * @constructor
     */
    const UpdateWindowColor = (isblack:boolean):void=>{
        if (isblack){
            document.body.setAttribute('arco-theme', 'dark');
            theme.value = "dark"
            userstore.theme = "dark"
            localStorage.setItem("theme","dark")
        }
        else{
            document.body.removeAttribute('arco-theme');
            theme.value = "default"
            userstore.theme = "default"
            localStorage.setItem("theme","default")
        }
        // 修改展示的颜色
        if (userstore.theme==="default"){
            themeColor["background-color"] = "#ffffff"
            themeColor["color"] = "#232324"
        }
        else{
            themeColor["background-color"] = "#232324"
            themeColor["color"] = "#bcbca4"
        }
        userstore.themeColor = themeColor
    }
    /**
     * 加载视口背景颜色
     * @constructor
     */
    const LoadWindowColor = ():void=>{
        const theme = localStorage.getItem("theme")
        if (theme==="dark")
            UpdateWindowColor(true)
        else
            UpdateWindowColor(false)
    }
    /**
     * 初始化加载数据
     */
    const initwindow = ():void=>{
        windowsHeight.value = window.innerHeight
        windowswidth.value = window.innerWidth
        theme.value = userstore.theme
        if (userstore.theme==="default"){
            themeColor["background-color"] = "#ffffff"
            themeColor["color"] = "#232324"
        }
        else{
            themeColor["background-color"] = "#232324"
            themeColor["color"] = "#bcbca4"
        }
        userstore.themeColor = themeColor
    }
    /**
     * 监听视口变化
     */
    window.addEventListener('resize', () => {
        initwindow()
    });

    onMounted(()=>{
        initwindow()
    })
    return{
        windowsHeight,
        windowswidth,
        theme,
        themeColor,
        UpdateWindowColor,
        LoadWindowColor
    }
}